<script setup lang="ts" name="LuckyWheel4">
import bg from '@/assets/lottery/luckyWheel/luckyWheel4/bg.png'
import button from '@/assets/lottery/luckyWheel/luckyWheel4/btn.png'
import { lottery } from '@/api/lottery'
const luckyWheelRef = ref(null)

const initInfo = ref({
  blocks: [
    { imgs: [
        { src: bg, width: '100%', height: '100%', rotate: true }
      ]
    }
  ],
  prizes: [
    { background: '', id: '0' },
    { background: '', id: '1' },
    { background: '', id: '2' },
    { background: '', id: '3' },
    { background: '', id: '4' },
    { background: '', id: '5' }
  ],
  buttons: [
    { radius: '30%', imgs: [{ src: button, top: '-100%', width: '100%', height: '100%' }] },
    { radius: '24%', fonts: [
      { text: '开始', top: '-18px', fontColor: '#fff', fontSize: '15px' }
    ] },
    { radius: '24%', fonts: [
      { text: '抽奖', top: '-2px', fontColor: '#fff', fontSize: '15px' }
    ] }
  ],
  defaultConfig: {
    // stopRange: 0.6,
    offsetDegree: -360 / 6 / 2
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyWheelRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyWheelRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>大转盘-自定义</span>
      </div>
    </template>
    <div class="lucky-wheel">
      <div class="lucky-wheel-pane">
        <LuckyWheel ref="luckyWheelRef" width="15.625vw" height="15.625vw" :prizes="initInfo.prizes" :blocks="initInfo.blocks" :buttons="initInfo.buttons" :defaultConfig="initInfo.defaultConfig" @start="startCallback" @end="endCallback"></LuckyWheel>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff52b3;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }

  .lucky-wheel {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
}

.lucky-wheel-pane {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.625vw;
  height: 15.625vw;
  margin: 1.8vw auto;
}
</style>
